<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/react.js"></script>
		<script src="js/react-dom.js"></script>
		<script src="js/browser.min.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
				width: 696px;
				margin: 200px auto;
			}
			ul li{
				display: inline-block;
				vertical-align: top;
				margin: 0 10px 10px 0;
			}
			ul li img{
				width: 164px;
				height: 103px;
				vertical-align: top;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		
		
		<script type="text/babel">
			var Skin = React.createClass({
				
				getInitialState: function(){
					return {
						num: '0'
					}
				},
				
				changeBg: function(e){
					console.log(this)
					{/*触发click事件的为什么是组建本身，而不是绑定事件的对象？*/}
					console.log(e.currentTarget)
					var id = e.currentTarget.getAttribute("data-id");
					this.setState({
						num: id
					});
				},
				
				createStyles: function(){
					return ({
						position: 'absolute',
						top: 0,
						bottom: 0,
						left: 0,
						right: 0,
						backgroundAttachment: 'fixed',
						backgroundImage: 'url(img/0' + this.state.num + '.jpg)',
						backgroundRepeat: 'no-repeat',
						backgroundSize: 'cover'
					})
				},
				
				createImg: function(){
					var arr = [];
					
					for(var i = 0; i < 8; i++){
						arr.push(
							<li key={i} data-id={i} onClick={this.changeBg}>
								<img src={"img/0" + i + ".jpg"} />
							</li>
						)
					};
					
					return arr;
					
				},
				
				render: function(){
					return (
						<div className="bg" style={this.createStyles()}>
							<div className="box">
								<ul>
									{this.createImg()}
								</ul>
							</div>
						</div>	
					)
				}
			});
			
			ReactDOM.render(<Skin></Skin>, document.getElementById('box'));
		</script>
	</body>
</html>
